<template>
    <el-row class="serverNetLoad">
        <el-col :span="24" class="serverNetLine-box">
            <div id="NetLoad" ref="NetLoad" class="NetLine"></div>
        </el-col>
        <el-col :span="24" class="serverNetText-box">
            <span class="netTextIo">发送率：{{this.send? this.send: '0'}} </span>
            <br>
            <span class="netTextIo">接收率：{{this.receiv? this.receiv: '0'}}</span>
            <br>
            <span class="netTextIo">速率（KB/s）：{{this.rate? this.rate: '0'}}</span>
        </el-col>
    </el-row>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'osnetworkio',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "",
                },
            },
            rate: '',
            send: '',
            receiv: '',
            ySend: '',
            yReceiv: '',
            sendData :[],
            receivData: this.receivDataTest(),
            NetLoad: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                title: {
                    text: "30秒内的数据",
                    left: 'center',
                    textStyle:{
                        color: 'rgb(255, 245, 238)'
                    }
                },
                grid: {
                    top: '15%',
                    // left: '0%',
                    height: '82%',
                    width: '86%',
                    // containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                        lineStyle: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel:{
                        show: false
                    },
                    data: this.testData(),
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    boundaryGap: ['5%', '5%'],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            opacity: 0.4,
                            type: 'dotted',
                            color: 'rgb(145, 199, 174)',
                        }
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                },
                series: [
                    {
                    name: '发送率',
                    data: this.sendData,
                    type: 'line',
                    color: 'rgb(145, 199, 174)',
                    showSymbol: false,
                },
                    {
                    name: '接收率',
                    data: this.receivData,
                    type: 'line',
                    color: 'rgb(212, 130, 101)',
                    showSymbol: false,
                },
                ]
            },
            timerName: 'NetLoad',
            timerEventName: 'timerNetLoad',
            timerInterval: 1000 * 3
        }
    },
    created() {
        bus.$on('selectedMonIDServer', msg => {
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
			this.initGetData();
			this.getData();
        });

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
                this.getData();
                this.sendData.shift();
                this.sendData.push(this.ySend);
                this.receivData.shift();
                this.receivData.push(this.yReceiv);
                this.EChartsOption.xAxis.data.shift();
                this.EChartsOption.xAxis.data.push(axisData);
                this.NetLoad.setOption({
                    xAxis: {
                        data: this.EChartsOption.xAxis.data
                    },
                    series: [
                        {
                            data: this.sendData
                        },
                        {
                            data: this.receivData
                        }
                    ]
                })
            }
        });
    },
    mounted() {
        // this.NetLoad = this.$echarts.init(this.$refs.NetLoad);
		console.log(this.sendData)
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.NetLoad);
            myEchart.resize();
        }
		console.log(this.sendData)
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        initGetData(){
            // this.NetLoad.showLoading({
            //     text: '加载中...',
            //     color: '#c23531',
            //     textColor: '#fff',
            //     maskColor: 'rgba(2, 16, 51, 0.8)',
            //     zlevel: 0,
            //     fontSize: 12,
            //     showSpinner: true,
            //     spinnerRadius: 10,
            //     lineWidth: 5
            // });
            let _postData = {
                opera: 'OSNetworkIOLine',
                filters: {
                    "monid": this.postData.filters.monid,
                    "pointNum":"40"
                },
            };
            fetchData({
                postData : JSON.stringify(_postData)
            }).then((res) => {
                let _arrSend = [];
                let _arrRecive = [];
                let _str = [];
                // this.cpuData.push(res.CPU_USER * 100);
                for (let i = 0; i < res.data.length; i++) {
                    _arrSend.push((res.data[i].TX_KBYTE).toFixed(0));
                    _arrRecive.push((res.data[i].RX_KBYTE).toFixed(0));
                    _str.push(res.data[i].RECORD_TIME);
                }
                this.sendData = _arrSend;
                this.receivData = _arrRecive;
                this.EChartsOption.xAxis.data = _str;
				this.myEchart();
            });
        },
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                console.log(res)
                if (res.data.length > 0 && res.data[0].RECORD_TIME != null) {
                    this.send = res.data[0].TX_KBYTE + ' KB/s';
                    this.receiv = res.data[0].RX_KBYTE + ' KB/s';
                    this.rate = res.data[0].RT_SPEED + ' KB/s';
                    this.ySend = res.data[0].TX_KBYTE;
                    this.yReceiv = res.data[0].RX_KBYTE;
                    this.sendData.push(res.data[0].TX_KBYTE);
                    this.receivData.push(res.data[0].RX_KBYTE);
                    let _str = res.data[0].RECORD_TIME.replace(/\s+/g,"\n");
                    this.EChartsOption.xAxis.data.push(_str);
					console.log(123,_str)
                }else{
                    this.send = '';
                    this.receiv = '';
                    this.rate = '';
                    this.sendData = [];
                    this.receivData = []; 
                }
            });
        },
        drawNetLine(){
            this.NetLoad.setOption(this.EChartsOption);
        },
        testData() {
            let _arr = [];
            for (let i = 0; i < 40; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        // sendDataTest() {
        //     let _arr = new Array(40);
            
        //     return _arr;
        // },
        receivDataTest() {
            let _arr = new Array(40);
            
            return _arr;
        },
		myEchart(){
		let myChart = this.$echarts.init(this.$refs.NetLoad);
		const option = {
			animationDuration: 100,
			animationEasingUpdate: 'quinticInOut',
			tooltip: {
			    trigger: 'axis',
			},
			title: {
			    text: "30秒内的数据",
			    left: 'center',
			    textStyle:{
			        color: 'rgb(255, 245, 238)'
			    }
			},
			grid: {
			    top: '15%',
			    // left: '0%',
			    height: '82%',
			    width: '86%',
			    // containLabel: true
			},
			xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    splitLine: {
			        show: false,
			        lineStyle: false
			    },
			    axisTick: {
			        show: false
			    },
			    axisLabel:{
			        show: false
			    },
			    data: this.testData(),
			    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
			},
			yAxis: {
			    type: 'value',
			    min: 0,
			    boundaryGap: ['5%', '5%'],
			    splitLine: {
			        show: true,
			        lineStyle: {
			            opacity: 0.4,
			            type: 'dotted',
			            color: 'rgb(145, 199, 174)',
			        }
			    },
			    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
			},
			series: [
			    {
			    name: '发送率',
			    data: this.sendData,
			    type: 'line',
			    color: 'rgb(145, 199, 174)',
			    showSymbol: false,
			},
			    {
			    name: '接收率',
			    data: this.receivData,
			    type: 'line',
			    color: 'rgb(212, 130, 101)',
			    showSymbol: false,
			}]
			};
			myChart.setOption(option);
		},
    },
	
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    // watch:{
    //     'EChartsOption': {
    //         handler: function () {
    //             this.drawNetLine();
    //         },
    //         deep: true
    //     }
    // }
}
</script>
<style scoped>
.serverNetLoad{
	height: calc(100% - 22px - 8px);
	margin-bottom: 0 !important;
	text-align: left;
}
.serverNetLine-box{
    height: calc(73% - 10px);
}
.NetLine{
    height: 100%;
}
.serverNetText-box{
    height: calc(100% - 73% + 10px);
    text-align: center;
    margin-top: 0.5%;
    overflow: hidden;
}
.serverNetText-box > div {
    height: 100%;
}
.serverNetText-box .netTextIo{
    height: calc(100% / 3);
    color: seashell;
    /* font-size: large; */
    font-weight: bold;
}
</style>